// 部门管理
import React, { useEffect, useState, useRef } from "react";

import { Table, Space, Button, Form, Input, Popconfirm, message } from "antd";
import type { TableColumnsType } from "antd";

import api from "../../api";
import { IDepth } from "../../types/login";
import { formatDateTime } from "../../utils";
import CreateDept from "./CreateDept";
const Depth: React.FC = () => {
    const [data, setData] = useState<IDepth[]>([]);
    const [loading, setLoading] = useState<boolean>(false);
    const [form] = Form.useForm();
    const deptRef = useRef<{
        showModal: (
            type?: string,
            data?: IDepth | { parentId: string },
        ) => void,
        upData: () => void
    }>({
        showModal: () => { },
        upData: () => getDepthData()
    }); // 定义ref类型

    const columns: TableColumnsType<IDepth> = [
        {
            title: '部门名称',
            dataIndex: 'deptName',
            key: 'deptName',
            width: '200',
        },
        {
            title: '负责人',
            dataIndex: 'userName',
            key: 'userName',
            width: '150',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            render: (text) => formatDateTime(new Date(text))
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            render: (text) => formatDateTime(new Date(text))
        },
        {
            title: '操作',
            key: 'action',
            width: '200',
            render: (_, record: IDepth) => (
                <Space>
                    <Button type="primary" onClick={
                        () => handleAdd(record._id)
                    }>新增</Button>
                    <Button type="primary" onClick={
                        () => handleEdit(record)
                    }
                    >编辑</Button>
                    <Popconfirm
                        title="警告"
                        description={`确认删除${record.deptName}吗？`}
                        onConfirm={() => handleDelete(record._id)}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Button danger>删除</Button>
                    </Popconfirm>

                </Space>
            ),

        }

    ];

    useEffect(() => {
        getDepthData();
    }, []);

    const getDepthData = async () => {
        setLoading(true);
        // 获取部门数据
        const data = await api.getDeptList(form.getFieldsValue());
        setData(data);
        setLoading(false);
    }
    // 新增
    const handleAdd = (id: string) => {
        deptRef.current?.showModal('add', { parentId: id });
    }
    // 编辑
    const handleEdit = (record: IDepth) => {
        deptRef.current?.showModal('edit', record);
    }
    // 删除
    const handleDelete = async (id: string) => {
        await api.deleteDept({ _id: id })
        message.success('删除成功');
        getDepthData();
    }
    // 新增
    const handleCreate = () => {
        deptRef.current?.showModal();
    }
    // 重置
    const handleReset = () => {
        form.resetFields();
        getDepthData();
    }


    return (
        <div>
            <Form className="search-form" layout="inline" form={form}>
                <Form.Item name="deptName" label="部门名称">
                    <Input placeholder="请输入部门名称" />
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type="primary" className="mr10" onClick={getDepthData}>
                            查询
                        </Button>
                        <Button type="primary" onClick={handleReset}>
                            重置
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            <div className="wrap-table">
                <div className="header">
                    <div className="title">部门列表</div>
                    <div className="action">
                        <Button onClick={handleCreate}>新增</Button>
                    </div>
                </div>
                <Table rowKey={'_id'} columns={columns} dataSource={data} loading={loading} pagination={false}/>
            </div>
            <CreateDept deptRef={deptRef} upData={getDepthData} /> {/* 传递ref */}
        </div>
    );
};

export default Depth;
